<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{padding: 0;margin: 0;}
			.app{overflow: hidden;}
			ul{overflow: hidden;list-style-type: none;float: left;}
			ul li{float: left;position: relative;margin: 0 2px;cursor: pointer;}
			ul li img{width: 100px;height: 100px;display: block;border: none;}
			ul div{position: absolute;padding: 2px;box-sizing: border-box; background: rgba(0,0,0,0.6);bottom: 0;width: 100%;left: 0;color: #fff;font-size: 12px;}
			.change{height: 100px;line-height: 100px;width: 100px;text-align: center;float: left;cursor: pointer;}
			.change:hover{color: #f00;}
			.tips{position: fixed;background: rgba(0,0,0,0.6);width: 200px; border-radius: 5px;padding: 5px;color: #fff;font-size: 12px;display: none;}
		</style>
	</head>
	<body>
		<div id="app" class="app">
			<ul id="items">
			    <li v-for="el in imgList" onmousemove="move(event)" v-on:click="imgClick(el.src)" v-on:mouseout="out()" v-on:mouseenter="enter(el)">
			    	<img v-bind:src="el.src" alt="" />
			    	<div>
			    		<p>{{el.name}}</p>
			    		<p>{{el.part}}</p>
			    	</div>
			    </li>
			</ul>
			<div class="change" v-on:click="change()">换一批</div>
			<div class="tips" id="tips">
				<p>姓名：{{temp.name}}</p>
				<p>所属部门：{{temp.part}}</p>
			</div>
		</div>
		<script src="js/Sortable.min.js"></script>
		<script src="js/jquery-1.8.3.min.js"></script>
		<script src="js/vue.js"></script>
		<script>
			var app=new Vue({
				el:"#app",
				pos:1,
				data:{
					temp:{},
					imgList:[],
					imgList1:[
					{src:"images/1.jpg",name:"金镶玉1",part:"南京分公司"},
					{src:"images/2.jpg",name:"韩梅梅",part:"南京分公司"},
					{src:"images/3.jpg",name:"李磊",part:"南京分公司"},
					{src:"images/4.jpg",name:"mike",part:"南京分公司"},
					{src:"images/5.jpg",name:"jim",part:"南京分公司"},
					],
					imgList2:[
					{src:"images/6.jpg",name:"白展堂",part:"南京分公司"},
					{src:"images/7.jpg",name:"金镶玉2",part:"南京分公司"},
					{src:"images/8.jpg",name:"金镶玉",part:"南京分公司"},
					{src:"images/9.jpg",name:"金镶玉",part:"南京分公司"},
					{src:"images/10.jpg",name:"金镶玉",part:"南京分公司"},
					]
				},
				methods:{
					change:function(){
						if(app.pos==1){
							app.pos=2;
							app.imgList=app.imgList2;
						}else{
							app.pos=1;
							app.imgList=app.imgList1;
						}
					},
					imgClick:function(url){
						parent.update(url);
					},
					enter:function(el){
						app.temp=el;
					},
					out:function(){
						$("#tips").hide();
					}
				}
			})
			app.change();
			var el = document.getElementById('items');
			new Sortable(el);
			//鼠标移动
			function move(e){
				$("#tips").css({
					display:"block",
					left:e.clientX+10+"px",
					top:e.clientY+10+"px",
				});
			}
		</script>
	</body>
</html>
